<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>让盒子实现水平和垂直居中</title>
    <style>
        div{
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
            /* 1. 我们translate里面的参数可以用 % */
            /* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */
            /* 这里的 50% 就是 250px 因为盒子的宽度是 500px */
            /* transform:translateX(50%); */
            /* transform: translate(50%,50%); */
        }

        p{
            position:absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color:purple;
            /* 以前使用margin-top、margin-left 让盒子往上或往左走自身盒子的一般宽、高,这种方式需要计算盒子的一半 */
            /* margin-top: -100px; */
            /* margin-left: -100px; */
            /* 可以使用translate(-50%,-50%);盒子往左和往上走自身盒子的一半,这种方式无需计算盒子的一半 */
            transform: translate(-50%,-50%);
        }

        span{
            background-color:skyblue;
            /* translate 对于行内元素是无效的 */
            transform: translate(300px,300px);
        }

    </style>
</head>
<body>
    <div>
        <p></p>
    </div>

    <span>123</span>
</body>
</html>